<template>
	<div>
		<div class="container">
			<div class="container">
				<div class="toolbar mt-2">
					<a-form ref="searchRef" layout="inline" :label-col="{style: { width: '100px' }}" :model="searchState" @finish="current=1;loading=true;initData()">
						<a-row style="width:100%;" :gutter="20">
							<a-col style="padding: 10px 0;" :span="6">
								<a-form-item label="项目名称">
									<a-select v-model:value="searchState.project_id" :show-search="true" placeholder="请选择项目" :options="projectOptions" option-filter-prop="label" allow-clear @change="updateProjectSearch"></a-select>
								</a-form-item>
							</a-col>
							<a-col style="padding: 10px 0;" :span="6">
								<a-form-item label="选择供应商" name="supplier_id">
									<a-select v-model:value="searchState.supplier_id" :show-search="true" placeholder="请选择" :options="userList" option-filter-prop="label" allow-clear></a-select>
								</a-form-item>
							</a-col>
							<a-col style="padding: 10px 0;" :span="3">
								<a-form-item>
									<a-space>
										<a-button type="primary" html-type="submit">
											<search-outlined />搜索
										</a-button>
									</a-space>
								</a-form-item>
							</a-col>
						</a-row>
					</a-form>
				</div>
				<div class="mt-2">
					<a-table v-if="!loading" :columns="columns" :scroll="tableScroll" children-column-name="children" :default-expand-all-rows="false" :data-source="psSource" :pagination="pagination" :loading="loading" @change="initData">
						<template #bodyCell="{ column, record }">
							<template v-if="column.dataIndex === 'operation'">
								<a-space>
									<a-button type="link" @click="show(record)">
										<right-outlined />查看
									</a-button>
								</a-space>
							</template>
						</template>
					</a-table>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
import { reactive, ref, computed, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import { usePagination } from "vue-request";
import { post } from "../utils/index.js";
const userList = ref([]);
const projectOptions = ref([]);

const searchRef = ref();
const searchState = reactive({});
const tableScroll = computed(() => ({
	x: document.documentElement.clientWidth - 650
}));
const columns = [
	{
		title: "序号",
		dataIndex: "supplier_id",
		key: "supplier_id",
		width: 100,
		align: "left",
		fixed: "left",
	},
	{
		title: "供应商名称",
		dataIndex: "supplier_name",
		sorter: false,
		width: 150,
		ellipsis: true,
		fixed: "left"
	},
	{
		title: "台账数量",
		dataIndex: "ys_quantity",
		sorter: false,
		width: 150,
		align: "center"
	},
	{
		title: "操作",
		dataIndex: "operation",
		sorter: false,
		fixed: "right",
		width: 300,
		align: "center"
	}
];
post("department/projects?type=3").then(({ data }) => {
	projectOptions.value = data.map(d => {
		return {
			value: d.id,
			label: d.name
		};
	});
});

const { data, loading, run, current, pageSize, total } = usePagination(params => post("supplyOrder/bySupplier", { ...params, ...searchState, ys_status: 2 }), {
	defaultParams: [
		{
			page_size: 10
		}
	],
	pagination: {
		currentKey: "page",
		pageSizeKey: "page_size",
		totalKey: "total"
	}
});
const psSource = computed(() =>
	(data.value?.data || []).map(d => {
		if (d.children?.length === 0) delete d.children;
		return d;
	})
);
const pagination = computed(() => ({
	total: total.value,
	current: current.value,
	pageSize: pageSize.value
}));

const initData = (pag, filters, sorter) => {
	pag = Object.assign(
		{
			current: current.value,
			pageSize: pageSize.value
		},
		pag || {}
	);
	filters = { ...filters, ...searchState };

	run({
		page_size: pag?.pageSize,
		page: pag?.current,
		sort_field: sorter?.field,
		sort_order: sorter?.order,
		...filters
	});
};
// 修改项目筛选条件
function updateProjectSearch() {
	post("user", { is_supplier: 1, page_size: 1000 }).then(({ data }) => {
		userList.value = data.map(d => {
			return {
				value: d.id,
				label: d.company_name || d.mobile
			};
		});
	});
}

const show = record => {
	const id = record.supplier_id;
	router.push(`/yanshou/standingBook/info/${id}`);
};
const router = useRouter();
</script>
<style scoped lang="scss">
.container {
  background: #fff;
  padding: 12px;
}
</style>
